<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <!--<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />-->
    <meta name="renderer" content="webkit"/>
    <title></title>
    <link rel="stylesheet" href="__CSS__/pintuer.css"/>
    <link rel="stylesheet" href="__CSS__/admin.css"/>
    <script src="__JS__/jquery-1.8.3.min.js"></script>
    <script src="__JS__/jquery.js"></script>
    <script src="__JS__/pintuer.js"></script>
    <link href="__JS__/bootstrap-3.3.4.css" rel="stylesheet"/>
    <!--<script type="text/javascript" src="__JS__/merchant_submit/merchant_submit.js" charset="utf-8"></script>-->
    <!--<script type="text/javascript" src="__JS__/jquery.validate.js" charset="utf-8"></script>-->
    <script src="__JS__/layer/layer.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=hsaUPForKQCFPvo0bCAowpe00AvKQugP"></script>
</head>
<body>
<div class="panel admin-panel">
    <div class="panel-head" id="add"><strong><span class="icon-pencil-square-o"></span>景点/农家乐</strong></div>
    <div class="body-content">
        <form method="post" class="form-x" action="{:url('Tourism/app')}" enctype="multipart/form-data" onsubmit="return validate()" id="form">
            <div class="form-group">
                <div class="label">
                    <label>景点/农家乐名称：</label>
                </div>
                <div class="field">
                    <input type="text" class="input w50" value="" name="name" id="name" data-validate="required:请输入内容" />
                    <div class="tips"></div>
                </div>
            </div>
            <div class="form-group">
                <div class="label">
                    <label>经度：</label>
                </div>
                <div class="field">
                    <input type="text" class="input w50" name="address[0]" id="lng" value=""/>
                </div>
            </div>
            <div class="form-group">
                <div class="label">
                    <label>纬度：</label>
                </div>
                <div class="field">
                    <input type="text" class="input w50" name="address[1]" id="lat" value=""/>
                </div>
            </div>
            <div class="form-group">
                <div class="label">
                    <label>景点/农家乐图片：</label>
                </div>
                <div id="preview"></div>
                <div class="field" style="position: relative;">
                    <input type="file" onchange="preview(this)"  multiple="multiple"    name="img[0]" style="margin-left: 150px"/>
            </div>
            </div>
            <div class="form-group">
                <div class="label">
                    <label>景点/农家乐详情图：</label>
                </div>

                <div class="field" style="position: relative;">
                    <input type="file" onchange="preview1(this)"  name="img[1]"  style="display: inline-block"/>
                    <input type="file" onchange="preview2(this)" name="img[2]" style="display: inline-block"/>
                    <input type="file" onchange="preview3(this)" name="img[3]" style="display: inline-block"/>
                </div>
            </div>
            <div style="width: 500px;margin-left: 100px">
                <span id="preview1"></span><span id="preview2"></span><span id="preview3"></span>
            </div>
            <br/>
            <div class="form-group">
                <div class="label">
                    <label>价格：</label>
                </div>
                <div class="field">
                    <input type="text" class="input w50" name="price" id="phone" value=""  />
                    <div class="tips"></div>
                </div>
            </div>
            <div class="form-group">
                <div class="label">
                    <label>景点/农家乐</label>
                </div>
                <select name="Agritainment" id="Agritainment" class="">
                    <option value="0" class="input">景点</option>
                    <option value="1" class="input">农家乐</option>
                </select>
            </div>
            <div class="form-group">
                <div class="label">
                    <label>介绍：</label>
                </div>
                <div class="field">
                    <input type="text" class="input w100" name="content" id="content" value=""  />
                    <div class="tips"></div>
                </div>
            </div>
            <div class="form-group">
                <div class="label">
                    <label>国内/国外</label>
                </div>
                <select name="class" id="merchant_if" class="">
                    <option value="0" class="input">国内</option>
                    <option value="1" class="input">国外</option>
                </select>
            </div>
            <div class="form-group">
                <div class="label">
                    <label>详细地址：</label>
                </div>
                <div class="field" >
                    <input type='text' class="input w50" value='' name='Detailed_address' id='sever_add' readonly>
                    <input type='button' class="input w50" value='点击显示地图获取地址经纬度' id='open'>
                </div>
            </div>
            <div class="form-group">
                <div class="label">
                    <label></label>
                </div>
                <div class="field">
                    <input type="submit" class="button bg-main icon-check-square-o" id="admin_add_tj" value="提交">
                </div>
            </div>
            <div id='allmap' style='width: 40%; height:60%; position: absolute; display: none;top: 430px;left: 800px'></div>
        </form>

    </div>
</div>
<!--<script src="http://www.jq22.com/jquery/1.11.1/jquery.min.js"></script>-->
<!--<script src="http://www.jq22.com/jquery/bootstrap-3.3.4.js"></script>-->
<script src="__JS__/distpicker.data.js"></script>
<script src="__JS__/distpicker.js"></script>
<script src="__JS__/main.js"></script>
</body></html>
<script type="text/javascript">
    function validate() {
        var sever_add = document.getElementsByName('sever_add')[0].value;
        if (isNull(sever_add)) {
            alert('请选择地址');
            return false;
        }
        return true;
    }

    //判断是否是空
    function isNull(a) {
        return (a == '' || typeof(a) == 'undefined' || a == null) ? true : false;
    }

    document.getElementById('open').onclick = function () {
        if (document.getElementById('allmap').style.display == 'none') {
            document.getElementById('allmap').style.display = 'block';
        } else {
            document.getElementById('allmap').style.display = 'none';
        }
    }

    var map = new BMap.Map("allmap");
    var geoc = new BMap.Geocoder();   //地址解析对象
    var markersArray = [];
    var geolocation = new BMap.Geolocation();


    var point = new BMap.Point(104.06,30.67);
    map.centerAndZoom(point, 11); // 中心点
    geolocation.getCurrentPosition(function (r) {
        if (this.getStatus() == BMAP_STATUS_SUCCESS) {
            var mk = new BMap.Marker(r.point);
            map.addOverlay(mk);
            map.panTo(r.point);
            map.enableScrollWheelZoom(true);
        }
        else {
            alert('failed' + this.getStatus());
        }
    }, {enableHighAccuracy: true})
    map.addEventListener("click", showInfo);


    //清除标识
    function clearOverlays() {
        if (markersArray) {
            for (i in markersArray) {
                map.removeOverlay(markersArray[i])
            }
        }
    }
    //地图上标注
    function addMarker(point) {
        var marker = new BMap.Marker(point);
        markersArray.push(marker);
        clearOverlays();
        map.addOverlay(marker);
    }
    //点击地图时间处理
    function showInfo(e) {
        document.getElementById('lng').value = e.point.lng;
        document.getElementById('lat').value =  e.point.lat;
        geoc.getLocation(e.point, function (rs) {
            var addComp = rs.addressComponents;
            var address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;
            if (confirm("确定要地址是" + address + "?")) {
                document.getElementById('allmap').style.display = 'none';
                document.getElementById('sever_add').value = address;
            }
        });
        addMarker(e.point);
    }

//图片上传预览
    function preview(file)
    {
        var prevDiv = document.getElementById('preview');
        if (file.files && file.files[0])
        {
            var reader = new FileReader();
            reader.onload = function(evt){
                prevDiv.innerHTML = '<img src="' + evt.target.result + '"  width="100px"height="100px"/>';
            }
            reader.readAsDataURL(file.files[0]);
        }
        else
        {
            prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';
        }
    }

    function preview1(file)
    {
        var prevDiv = document.getElementById('preview1');
        if (file.files && file.files[0])
        {
            var reader = new FileReader();
            reader.onload = function(evt){
                prevDiv.innerHTML = '<img src="' + evt.target.result + '"  width="100px"height="100px"/>';
            }
            reader.readAsDataURL(file.files[0]);
        }
        else
        {
            prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';
        }
    }
    function preview2(file)
    {
        var prevDiv = document.getElementById('preview2');
        if (file.files && file.files[0])
        {
            var reader = new FileReader();
            reader.onload = function(evt){
                prevDiv.innerHTML = '<img src="' + evt.target.result + '"  width="100px"height="100px"/>';
            }
            reader.readAsDataURL(file.files[0]);
        }
        else
        {
            prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';
        }
    }
    function preview3(file)
    {
        var prevDiv = document.getElementById('preview3');
        if (file.files && file.files[0])
        {
            var reader = new FileReader();
            reader.onload = function(evt){
                prevDiv.innerHTML = '<img src="' + evt.target.result + '"  width="100px"height="100px"/>';
            }
            reader.readAsDataURL(file.files[0]);
        }
        else
        {
            prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';
        }
    }

</script>